<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description"
	content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
<meta name="keywords"
	content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
<meta name="author"
	content="Sergey Pimenov and Metro UI CSS contributors">

<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<title>个人信息页面</title>
<link href="${pageContext.request.contextPath }/css/metro.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath }/css/metro-responsive.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-icons.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-schemes.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/jquery-2.1.3.min.js"></script>
<script src="${pageContext.request.contextPath }/js/metro.js"></script>
<script src="${pageContext.request.contextPath }/js/select2.min.js"></script>
<style type="text/css">
.exampl {
	width: 840px;
	height: 550px;
	position: relative;
	margin: 0 0 .625rem 0;
	background-color: #ffffff;
}

.exampl:before,.example:after {
	display: table;
	content: "";
}

.exampl:after {
	clear: both;
}
</style>
<script type="text/javascript">
	function check() {
		var username = document.getElementById("username").value;
		var newPassword = document.getElementById("newPassword").value;
		var newPassword1 = document.getElementById("newPassword1").value;
		var oldPassword = document.getElementById("oldPassword").value;
		var flag = 0;
		
		document.getElementById("oldPasswordLabel").innerHTML="";
		document.getElementById("newPasswordLabel").innerHTML="";
		document.getElementById("newPassword1Label").innerHTML="";
		
		if(oldPassword==""){
			document.getElementById("oldPasswordLabel").innerHTML = "  原密码不能为空！";
			flag = 1;
		}
		if(newPassword==""){
			document.getElementById("newPasswordLabel").innerHTML = "  新密码不能为空！";
			flag = 1;
		}
		if (newPassword != newPassword1) {
			document.getElementById("newPassword").value = "";
			document.getElementById("newPassword1").value = "";
			document.getElementById("newPassword1Label").innerHTML = "  两次输入的密码不同！";
			flag = 1;
		} 
		if(flag!=1){
			update(username,oldPassword,newPassword);
		}
	}
	
	function update(username,oldPassword,newPassword){
		$.ajax({
			type : 'post',
			url : '${pageContext.request.contextPath }/user/updatePassword.action',
			//请求的是key/value 不需要指定contentType，因为默认就是key/value类型
			//数据格式是key/value的串
			data : 'username='
					+ username+'&oldPassword='+oldPassword+'&newPassword='+newPassword,
			success : function(data) {
				//返回json结果
    			alert(data.message);
			}
		}); 
	}
</script>
</head>
<body>
	<div class="exampl">
		<form id="form1" name="stuffForm"
			action="javascript:void(0)">
			<div class="accordion large-heading" data-role="accordion"
				data-close-any="true">
				<div class="frame active">
					<div class="content">
						账号&nbsp;
						<div class="input-control text" style="width: 150px">
							<input type="text" style="width: 150px" maxlength="8"
								name="username" readonly="readonly" id="username"
								value="<%=session.getAttribute("username")%>">
						</div>
						<br />原密码&nbsp;
						<div class="input-control text" style="width: 150px">
							<input type="text" style="width: 150px" maxlength="8"
								name="oldPassword" id="oldPassword"
								value="<%=session.getAttribute("idStuff")%>">
						</div>&nbsp;<font color="red"><label id="oldPasswordLabel"></label></font>
						<br />新密码&nbsp;
						<div class="input-control text" style="width: 150px">
							<input type="text" style="width: 150px" maxlength="8"
								name="newPassword" id="newPassword"
								value="<%=session.getAttribute("userType")%>"> 
						</div>&nbsp;<font color="red"><label id="newPasswordLabel"></label></font>
						<br />确认新密码&nbsp;
						<div class="input-control text" style="width: 150px">
							<input type="text" style="width: 150px" maxlength="8"
								name="newPassword2" id="newPassword1"
								value="<%=session.getAttribute("username")%>"> 
						</div>&nbsp;<font color="red"><label id="newPassword1Label"></label></font>
					</div>
				</div>
			</div>
			<input type="submit" value="提交" onclick="check();" />
		</form>
	</div>
</body>
</html>